<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta name="keywords" content="" />
	<meta name="Description" content="" />
	<style>
	.con {list-style:none;width:400px;height:300px;overflow:hidden;margin:0 auto;}
	.con table{position:relative;}
	#con {position:absolute;}
	.con td img {width:400px;height:300px;}
	</style>
</head>
<body>
	<div class="con">
		<table cellspacing="0" cellpadding="0" border="0" >
			<tr id="con">
				<td><img src="1.jpg"></td>
				<td><img src="2.jpg"></td>
				<td><img src="3.jpg"></td>
				<td><img src="4.jpg"></td>
			</tr>
		</table>
	</div>
	<input type="button" value="start" id="input">
	<span id="test"></span>
	<script>
	var Tween = {
			Linear: function(t,b,c,d){ return c*t/d + b; },
			Quad: {
				easeIn: function(t,b,c,d){
					return c*(t/=d)*t + b;
				},
				easeOut: function(t,b,c,d){
					return -c *(t/=d)*(t-2) + b;
				},
				easeInOut: function(t,b,c,d){
					if ((t/=d/2) < 1) return c/2*t*t + b;
					return -c/2 * ((--t)*(t-2) - 1) + b;
				}
			},
			Cubic: {
				easeIn: function(t,b,c,d){
					return c*(t/=d)*t*t + b;
				},
				easeOut: function(t,b,c,d){
					return c*((t=t/d-1)*t*t + 1) + b;
				},
				easeInOut: function(t,b,c,d){
					if ((t/=d/2) < 1) return c/2*t*t*t + b;
					return c/2*((t-=2)*t*t + 2) + b;
				}
			},
			Quart: {
				easeIn: function(t,b,c,d){
					return c*(t/=d)*t*t*t + b;
				},
				easeOut: function(t,b,c,d){
					return -c * ((t=t/d-1)*t*t*t - 1) + b;
				},
				easeInOut: function(t,b,c,d){
					if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
					return -c/2 * ((t-=2)*t*t*t - 2) + b;
				}
			},
			Quint: {
				easeIn: function(t,b,c,d){
					return c*(t/=d)*t*t*t*t + b;
				},
				easeOut: function(t,b,c,d){
					return c*((t=t/d-1)*t*t*t*t + 1) + b;
				},
				easeInOut: function(t,b,c,d){
					if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
					return c/2*((t-=2)*t*t*t*t + 2) + b;
				}
			},
			Sine: {
				easeIn: function(t,b,c,d){
					return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
				},
				easeOut: function(t,b,c,d){
					return c * Math.sin(t/d * (Math.PI/2)) + b;
				},
				easeInOut: function(t,b,c,d){
					return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
				}
			},
			Expo: {
				easeIn: function(t,b,c,d){
					return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
				},
				easeOut: function(t,b,c,d){
					return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
				},
				easeInOut: function(t,b,c,d){
					if (t==0) return b;
					if (t==d) return b+c;
					if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
					return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
				}
			},
			Circ: {
				easeIn: function(t,b,c,d){
					return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
				},
				easeOut: function(t,b,c,d){
					return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
				},
				easeInOut: function(t,b,c,d){
					if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
					return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
				}
			},
			Elastic: {
				easeIn: function(t,b,c,d,a,p){
					if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
					if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
					else var s = p/(2*Math.PI) * Math.asin (c/a);
					return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
				},
				easeOut: function(t,b,c,d,a,p){
					if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
					if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
					else var s = p/(2*Math.PI) * Math.asin (c/a);
					return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
				},
				easeInOut: function(t,b,c,d,a,p){
					if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
					if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
					else var s = p/(2*Math.PI) * Math.asin (c/a);
					if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
					return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
				}
			},
			Back: {
				easeIn: function(t,b,c,d,s){
					if (s == undefined) s = 1.70158;
					return c*(t/=d)*t*((s+1)*t - s) + b;
				},
				easeOut: function(t,b,c,d,s){
					if (s == undefined) s = 1.70158;
					return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
				},
				easeInOut: function(t,b,c,d,s){
					if (s == undefined) s = 1.70158; 
					if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
					return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
				}
			},
			Bounce: {
				easeIn: function(t,b,c,d){
					return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
				},
				easeOut: function(t,b,c,d){
					if ((t/=d) < (1/2.75)) {
						return c*(7.5625*t*t) + b;
					} else if (t < (2/2.75)) {
						return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
					} else if (t < (2.5/2.75)) {
						return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
					} else {
						return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
					}
				},
				easeInOut: function(t,b,c,d){
					if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
					else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
				}
			}
		}
		function Run(w){
			O=this,O.s=0,O.e,O.g=400,O.w=w,O.d=100,O.n,O.t,O.l,O.m;
			if (typeof O.n=="undefined"){O.n=0;}
			O.tb=document.getElementById("con");
			O.td=O.td.getElementByTagName("td");
		}
		Run.prototype={
			constructor : Run,
			run : function(s,e,d,l){
				O.s=s*w,O.e=e*w,O.g=(e-s)*O.w,O.d=100,O.l=l;
				if (O.s-O.e>0){O.t=setInterval(O.runl, 5);}
				else if (O.s-O.e<0){O.t=setInterval(O.runr, 5);}
				//O.n=0;O.s=O.s+O.w;//alert(O.s+"  "+O.e+"  "+O.n+" "+n)
			},
			runr : function(){
				if(O.n>=O.d){clearInterval(O.t);return;}
				var tb=document.getElementById("con");
				var n=Math.ceil(Tween.Quad.easeOut(O.n,O.s,O.g,O.d));
				tb.style.left = -n + "px";
				O.n++;
			},
			runl : function(){
				if(O.n>=O.d){clearInterval(O.t);return;}
				var tb=document.getElementById("con");
				var n=Math.ceil(Tween.Quad.easeOut(O.n,O.s,O.g,O.d));
				tb.style.left = n + "px";
				O.n++;
			},
			runrr : function(){
				var n=Math.ceil(Tween.Quad.easeOut(O.n,O.s,O.g,O.d));
				if (O.s<O.td.length*O.w-O.w)
				{
				}
				tb.style.left = -n + "px";
				if (O.n<O.d){O.n++;setTimeout(O.runrr, 5);}
				else {O.s=O.s+O.g;O.n=0;return;}
			}
		}
		function left(){
			var aaa= new Run(400);
			document.getElementById("input").onclick=aaa.runrr;//function(){aaa.run(0,1,400,100);aaa.runrr;}
		}
		left();
	</script>
</body>
</html>